Subject: (fwd) Re: FAQ on HTML's? Newsgroups: wstd.html Lexicor@world.std.com (ysiu@lexicor.com) shaped the electrons to say: >I am sure this was asked before, I am looking for a general FAQ on HTML.., >and also perhaps VRML? CRIB SHEET for Hypertext Markup Language (HTML) by Steve Cunio latest update 27th April 1995 =============================================== (For latest copy of this file email me s.m.cunio@iti.salford.ac.uk with message HTMLCRIB.TXT) This document has been split into two parts. Beginner's - stuff to get you going and Advanced - which isn't really but what the heck I've called it that, covering mainly forms needing seperate scripts on a server ie stuff you can't provide with just HTML tags and also alignments etc. The document is designed so that you can cut and paste from it. Examples are given where appropriate of expected output. Text is placed where you would normally place the appropriate text as description and to show how the tags relate to the text. The items are arranged alphabeticaly. More often than not the tag is an abbreviation of the function which makes things easier! It might look like a lot to remember but it really is easy! Two items which don't really fall into either category are essential to web page creation these are: header info usually the title rest of document here . These tags bind the document. The header is used by some search engines to locate relevant documents for the user before the rest of the document is downloaded. The body as described above surrounds all the other page details. The beauty of HTML tags is that if they are not supported by your browser then they will be ignored. It follows then that if some of the tags below don't work for you, you need to get hold of the latest Netscape browser, freely available from these URLs: ftp://ftp.netscape.com/netscape1.1b3/ ftp://src.doc.ic.ac.uk/packages/WWW/Netscapes/netscape1.1 I make no apologies for stipulating the use of Netscape. If any other browser ever surpasses it I will duly give out that address also. However, if you publish a browser, let me know and I'll include the address for it here. Cheers! +++++++++++++ + BEGINNERS + +++++++++++++ BLINKING TEXT blinking text BOLD TEXT bold text CARRIAGE RETURN / LINE BREAK type text here
or here (moves down one line without leaving a space) CENTRED HTML
center text/image on screen
(note US spelling) DEFINITION LIST
(starts definition list. No blobs or numbers!)
term to be defined here.
definition of term here (automatically indented under dt)
etc
etc
(ends definition list) EMAIL ADDRESS
(moves down a line, not strictly necessary.) NAME
EMBED IMAGE Replace picture.gif with the name of the file of the graphic you wish to display. Must be of gif or jpg type. Description of picture goes here If the browser cannot display your picture then the contents of the alternative ALT text will be displayed for the user. Useful where relevance of image is important. EMBED SOUND text or picture jumps to and executes a sound file when text or picture is clicked. Generally .wav .au and .aif EMBED VIDEO text or picture jumps to and executes a video file. Can also use .avi files. HEADERS

largest header

through to
smallest header
HORIZONTAL RULE
shows a horizontal line across the screen. INDENTATION
...
(nothing here)
indented HTML and text etc. The more nested
s the more indentation you will get.
...
ITALICS italic text LINK TO EXTERNAL DOCUMENT / URL text or picture Jumps to specified document when text or picture is clicked. This area is said to be anchored. If to a file in your directory use as above. If to an external site replace document.html with full path ie http://www.salford.ac.uk/ ORDERED LIST
    (starts ordered list. Numbers put in front of each list item 1 to whatever)
  1. list item here
  2. etc
(finishes ordered list) PARAGRAPH

type paragraph here (moves down a space before showing text) PRE FORMATTED TEXT 

 text here is at a set width. useful for columns etc.
TABLES (Start table) (tabel row)
caption text
table header text table header text etc
defn text appears under first table header defn text appears under second table header etc
etc etc etc
TITLE OF DOCUMENT title Placed within tags. Goes in browser title bar. TYPEWRITER TEXT typewriter text ie fixed width UNORDERED LIST (finishes unordered list) ++++++++++++ + ADVANCED + ++++++++++++ Changes can be made to the aboe HTML to give your code greater flexibility. ALIGNMENT / SIZE / WIDTH Alignment can be made to a number of tags to the left/right or center. Some tags can be aligned top/middle/bottom. In the examples I have used only one of these. You may wish to use any of the others! These alignments themselves can be further refined. Changes can be made to the size and width of certain features. These are also shown here as for some there is no point in alignment if the size hasn't been changed! HEADERS

centred header

HORIZONTAL RULE
Size is the height of the line in pixels. Width is the length of the line across the screen, it can be expressed also in pixel numbers as is size. will give a solid bar rather than empty or 3d effect. IMAGES Aligns the picture with the blob at the top if in a list or produces the preceeding or next line of text alongside and at the top of the image. (Subsequent lines will be printed below the image Mosaic. Down the side Netscape) Aligns the picture with the list blob at the middle or produces the preceeding or next line of text at middle and alongside image. (Subsequent lines will be printed below the image Mosaic. Down the side Netscape) Aligns the picture with the list blob at the bottom or produces the preceeding or next line of text at the bottom and alongside the image. PARAGRAPHS

centered text here. PRE FORMATTED TEXT 

 Width set to number of characters.
TABLES header text Aligns to the cells top left. Can also valign (vertical) middle or bottom and normal align center or right. Also applies to and . caption text aligned above table Can also align bottom. BASEFONT SIZE Changes the basefont size from the default 3 BODY Sets the background colour and also text and link defaults. These are RGB (Red Green Blue) values. Experiment! The example here gives a yellow textured background. Design your own backgrounds! Define text colour, hypertext links, used links and active links respectively. All rgb values. These example colours work well with a black background. FONT SIZE newly sized text here The default value is 3. Adding 1 gives a bold like appearance etc. You can use plus and minus figures. Upto and down to seven I think. FORMS For forms that you create for user feedback or whatever to work you need to put a script onto your server. Readily available scripts can be found in the NCSA archives and tailored to suit your purposes. These can be found at and through your web browser by accessing this location: ftp://ftp.ncsa.uiuc.edu Here the form is taken from one of my pages. Unfortunately this doesn't work on our server and there is a large message on this page saying so but it's easier to explain by example. Cut out the relevant lines and put them in a document and tailor as required!
Stipulates URL location of where response will be posted ie mailme. Here a list is set up of selectable options. Will appear as a pull down list. Here the users selection is assigned in the response to the variable fao. If more than one can be selected add the word multiple after select. Your Name: Here the user is presented with a blank box. Text can be entered up to 60 characters in length. The default value of text already in the box is obviously set to nothing. You can restrict the number of characters allowed to be typed by adding the phrase maxlength=20 after the word input for instance. Although in this case this wouldn't make sense! Can we put your name into our visitors page?:
YES.
NO. Here the user selects an option by pressing the relevant button next to the answer they choose. The value assigned to the radio button is then stored in the relevant assigned variable. Here we have set the button to appear as checked already against YES! Other values for type are checkbox and text.

Message:

Here we have specified a screen size for a box into which the user types. The response from the user will be assigned to the variable message. This line displays a button on screen with the words Send The Mail displayed on it. When the user depresses the button the mail is sent to the url specified in the form action.

This line resets the form. Beware though some values are not affected! Useful that! The form is also ended. And you thought it was difficult! LINKS TO SPECIFIC PART OF DOCUMENT text or picture Jumps to another document or within the same document. Searches document for the line: and displays document from there on. Great for contents list of same page or for jumping back to the top of a document! Use whatever variable suits in place of TOLINK. ORDERED LIST

    List items tagged A,B,C... Can also be roman or indian numerals. Depicted I/1. The alpha and roman characters can be of lower case type a/i. SPECIAL CHARACTERS These are not supported in earlier browsers but we are finding that the special codes need not be typed for certain characters in Netscape. Such characters being those below. The full set of special codes including those of foreign languages (foreign to English that is!) can be found at this URL:- http://www.w3.org/hypertext/WWW/MarkUp/Entities.html < Less than symbol <. Type this in where it appears in any text. The semicolon must be typed. > Greater than symbol >. & Ampersand symbol &. TABLES To be effective and pleasing to the eye tables need to be flexible. The following tag extensions allow you to place text where you want it in their cells and put the table where you want it on the screen. Examples using also apply to . Also see alignment above. Here we can choose pixel width of border, distance between cells, space within a cell and width of table on screen respectively. This width can also be set to a number of pixels. Specifies the width and height of a cell in numbers of cells. This one will go across 2 columns and down 2 rows funnily enough! UNORDERED LIST
      Sets the list blob to a disc. May also be set to square or circle. May be changed for
    • items. This change will affect all those after it. ++++++++++++++++ + Further Info + ++++++++++++++++ Other details of HTML can be found on the WWW. Try these URLs from inside your browser. HTML Primer http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html HTML Jumpstation http://www.singnet.com.sg/public/dev-page1.html HTML 2.0 Search http://hopf.math.nwu.edu/html2.0/dosearch.html Form Overview http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/ fill-out-forms/overview.html ++++++++++++++++++ + ITI USERS ONLY + ++++++++++++++++++ To set up the World Wide Web (WWW or 3W) and load Beginners HTML do this: 1. If not done 3 on, logout if logged in. 2. Reset computer (turn off and on if necessary) 3. Type internet 4 Enter user id and password. 5. Type win486 (windows appears) 6. Double click on the Netscape icon. (egg timer appears; Netscape appears) 7. Click on FILE at top of screen. 8. Click on OPEN URL...... in this menu. 9. Click on box URL: 10.Type in http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html (the document now loads. Read and click around as desired!) Please mail any further information for addition to this list or any problems you may have to: Steve Cunio s.m.cunio@iti.salford.ac.uk Thanks a lot! I hope the above helps!! ================================================================ -- megazone@world.std.com (508) 752-2164 MegaZone's Waste Of Time Moderator: anime fanfic archive, ftp.std.com /archives/anime-fan-works; rec.arts.anime.stories - Maintainer: Ani Difranco Mailing List - Mail to majordomo@world.std.com with 'subscribe ani-difranco' in the body.
    header text